<script lang="ts" setup>
import {reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {useRouter} from "vue-router";

const router = useRouter()
const formSize = ref('large')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    userName: 'Admin',
    passWord: 'admin'
})

const rules = reactive<FormRules>({
    userName: [
        {required: true, message: '请输入用户名', trigger: 'blur'},
    ],
    passWord: [
        {required: true, message: '请输入密码', trigger: 'blur'},
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            router.push('/home')
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const options = Array.from({length: 10000}).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))
</script>

<template>
    <div class="app-container">
        <div class="login-left">
            1
        </div>
        <div class="login-right">
            <div class="login-form">
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" :size="formSize" class="demo-ruleForm"
                         label-width="auto">
                    <h2>登录</h2>
                    <el-form-item label="" prop="userName">
                        <el-input v-model="ruleForm.userName" placeholder="账号"/>
                    </el-form-item>
                    <el-form-item label="" prop="passWord">
                        <el-input v-model="ruleForm.passWord" placeholder="密码" show-password type="password"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="width: 100%" type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.app-container {
  display: flex;
  min-height: 100vh;
}

.login-left {
  width: 50%;
  background-image: url('https://vben.vvbin.cn/assets/login-bg.b9f5c736.svg');
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.login-right {
  .login-form {
    margin: 35% auto;
    width: 400px;
  }

  width: 50%;
}
</style>